<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">

    <h:outputScript>
        /* javascript function used to display center-north page layout */
        function displayCenterNorthLayout() {
            PF('layoutWV').open('center_north');
            $('.ui-layout-resizer-north').css("display", "block");
        }
    </h:outputScript>

    <pe:importEnum type="md.mru.frontend.utils.MainContentTypes" var="contentType"/>

    <p:outputPanel layout="block">
        <p:dataList value="#{node.treeFoldersAsList}" var="tf" rendered="#{not empty node.treeFolders}" type="definition">
            <p:outputPanel layout="block" style="display: flex">
                <p:outputPanel styleClass="#{tf.id.folder.folderState.icon}"/>
                <p:commandLink value="#{tf.id.folder.firstName} #{tf.id.folder.lastName}"
                               actionListener="#{folderAdministrationBean.showFolder(tf.id.folder)}"
                               update=":main_folder_details :main_content"
                               style="#{(tf.active) ? '' : 'opacity: 0.35;'}"
                               oncomplete="displayCenterNorthLayout()">
                    <f:setPropertyActionListener value="#{contentType.FOLDER_DETAILS_CONTENT}"
                                                 target="#{mainContentHandler.currentAccessedContent}"/>
                </p:commandLink>
            </p:outputPanel>
        </p:dataList>
    </p:outputPanel>

</ui:composition>